<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      body{ background:#ccc;}
      canvas{ background:#fff;}
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
  </body>
</html>
<script type="text/javascript">
  var canvas = document.getElementById('canvas');
  canvas.height=400;
  canvas.width=400;
  var ctx = canvas.getContext('2d');
  //第一个三角
  // ctx.beginPath();
  // ctx.strokeStyle = 'red';
  // ctx.moveTo(50,50);
  // ctx.lineTo(100,100);
  // ctx.lineTo(50,200);
  // ctx.closePath();
  // ctx.stroke();
  //第二个三角
  // ctx.beginPath();
  // ctx.strokeStyle = 'green';
  // ctx.moveTo(150,50);
  // ctx.lineTo(200,100);
  // ctx.lineTo(150,200);
  // ctx.closePath();
  // ctx.stroke();
  // var timer = null;
  //       var num = 1;
  //       ctx.moveTo(150,50);
  //       ctx.strokeStyle = 'gold';
  //       setInterval(function(){
  //           if(num == 100){
  //               clearInterval(timer);
  //               num=1;
  //           }else{
  //               num++;
  //           };
  //           ctx.lineTo(150,100+num*2);
  //           ctx.lineWidth = num;
  //           ctx.stroke();
  //       },100)
  // ctx.arc(100,100,100,0,90*Math.PI/180,false);
  // ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(20,150);
  ctx.bezierCurveTo(20,50,150,50,150,150);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(150,150);
  ctx.bezierCurveTo(150,250,280,250,280,150);
  ctx.stroke();


</script>
